/**
 * @authors 0936zz (zz5840@qq.com)
 * @date    2016-08-06 23:54
 */
@mp-background-url:"../img/mplayer_bg.png";
@mp-background-color : #212121;
@mp-gray : #727272;
@mp-main-color : #D32F2F;
@mp-hover : #F44336;


/* 去除浏览器默认样式 && 避免Bootstrap等框架破坏布局 */
.mp {
	* {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		font-family: "Microsoft YaHei", serif;
	}

	img {
		border: none;
	}
	input {
		outline: none;
	}
	a {
		text-decoration: none;
		display: inline-block;
		color: #FFF;
	}
	p {
		color: #FFF;
	}
	ul {
		list-style-type: none;
	}
	button {
		border: none;
		outline: none;
		cursor: pointer;
		background-color: transparent;
	}
}
.mp {
	width: 599px;
	height: 120px;
	position: fixed;
	bottom: 20px;
	left: -574px;
	border-radius: 0 5px 5px 0;
	background-color: @mp-background-color;
	-webkit-transition: left .5s;
	-moz-transition: left .5s;
	-o-transition: left .5s;
	transition: left .5s;
	&.mp-show {
		left: 0;
		.mp-toggle-img {
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			-o-transform: rotate(180deg);
			transform: rotate(180deg);
		}
	}
	.mp-cover {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	.mp-info {
		position: absolute;
		left: 120px;
		top: 15px;
		font-size: 14px;
		line-height: 1.8;
	}
	.mp-lrc-box {
		padding: 10px;
		position: absolute;
		top: 0;
		left: 600px;
		background-color: @mp-background-color;
		border-radius: 0 5px 5px 0;
		overflow: hidden;
		opacity: 0;
		-webkit-transition: opacity .5s;
		-moz-transition: opacity .5s;
		-o-transition: opacity .5s;
		transition: opacity .5s;
		&.mp-lrc-show {
			opacity: 1;
			& ~ .mp-lrc-close {
				opacity: 1;
			}
		}
	}
	.mp-lrc {
		width: 200px;
		height: 100px;
		font-size: 12px;
		overflow: hidden;
		color: #FFF;
		text-align: center;
		line-height: 2;
	}
	.mp-lrc-current {
		color: @mp-main-color;
	}
	.mp-lrc-close {
		width: 7px;
		height: 7px;
		background: url(@mp-background-url) no-repeat 0 -56px;
		position: absolute;
		top: 7px;
		right: -215px;
		opacity: 0;
		-webkit-transition: opacity .5s;
		-moz-transition: opacity .5s;
		-o-transition: opacity .5s;
		transition: opacity .5s;
		&:hover {
			background-position-x: -7px;
		}
	}
	.mp-menu {
		position: absolute;
		left: 510px;
		top: 10px;
	}
	.mp-list-toggle {
		width: 21px;
		height: 14px;
		background: url(@mp-background-url) no-repeat -29px -90px;
		float: left;
		&:hover {
			background-position-x: -50px;
		}
	}
	.mp-lrc-toggle {
		width: 14px;
		height: 14px;
		background: url(@mp-background-url) no-repeat -29px -56px;
		float: left;
		margin-left: 15px;
		&:hover {
			background-position-y: -70px;
		}
	}
	.mp-pro {
		width: 440px;
		height: 5px;
		border: 1px solid @mp-main-color;
		position: absolute;
		bottom: 15px;
		left: 120px;
		cursor: pointer;
	}
	.mp-pro-current {
		width: 0;
		height: 100%;
		background-color: @mp-main-color;
	}
	.mp-btn {
		position: absolute;
		top: 36px;
		left: 230px;
		height: 45px;
	}
	.mp-prev,.mp-next {
		width: 24px;
		height: 28px;
		background: url(@mp-background-url) no-repeat;
		float: left;
		margin-top: 8.5px;
		&:hover {
			background-position-y: -28px;
		}
	}
	.mp-prev {
		background-position: 0 0;
		margin-right: 30px;
	}
	.mp-next {
		background-position: -24px 0;
		margin-right: 20px;
	}
	.mp-pause {
		width: 38px;
		height: 45px;
		margin-right: 30px;
		float: left;
		background: url(@mp-background-url) no-repeat -86px 0;
		&:hover {
			background-position-y: -45px;
		}
	}
	.mp-play {
		background-position: -48px 0;
	}
	.mp-mode {
		width: 26px;
		height: 21px;
		background: url(@mp-background-url) no-repeat 0 -105px;
		margin-right: 20px;
		float: left;
		margin-top: 12px;
		&:hover {
			background-position-y: -126px;
		}
	}
	.mp-mode-0 {
		background-position-x: 0;
	}
	.mp-mode-1 {
		background-position-x: -26px;
	}
	.mp-mode-2 {
		background-position-x: -52px;
	}
	.mp-mode-3 {
		background-position-x: -78px;
	}
	.mp-vol {
		display: inline-block;
		float: left;
	}
	.mp-vol-img {
		width: 29px;
		height: 21px;
		background: url(@mp-background-url) no-repeat 0 -63px;
		margin-top: 12px;
		float: left;
		&:hover {
			background-position-y: -84px;
		}
	}
	.mp-mute {
		background-position: -120px -126px;
		&:hover {
			background-position: -149px -126px;
		}
	}
	.mp-vol-range {
		width: 70px;
		height: 5px;
		background: #FFF;
		display: inline-block;
		float: left;
		position: relative;
		margin: 20px 0 0 8px;
	}
	.mp-vol-current {
		width: 0;
		height: 100%;
		background: @mp-main-color;
	}
	.mp-vol-circle {
		width: 9px;
		height: 9px;
		position: absolute;
		top: -2px;
		border-radius: 5px;
		background: @mp-main-color;
		cursor: pointer;
		&:hover {
			background-color: @mp-hover;
		}
		&.mp-disabled {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: default;
			&:hover {
				background-color: @mp-main-color;
			}
		}
	}
	.mp-toggle {
		position: absolute;
		right: 0;
		top: 0;
		height: 120px;
		width: 25px;
		background: url(@mp-background-url) no-repeat -124px 0;
		&:hover {
			background-position-x: -149px;
		}
	}
	.mp-toggle-img {
		width: 12px;
		height: 21px;
		display: inline-block;
		background: url(@mp-background-url) no-repeat -104px -126px;
		position: absolute;
		top: 50px;
		left: 6px;
		-webkit-transition: -webkit-transform .5s;
		-moz-transition: -moz-transform .5s;
		-o-transition: -o-transform .5s;
		transition: transform .5s;
	}
	.mp-list-box {
		position: absolute;
		bottom: 120px;
		left: 0;
		width: 574px;
		height: 0;
		overflow: hidden;
		background-color: @mp-background-color;
		-webkit-transition: height .5s;
		-moz-transition: height .5s;
		-o-transition: height .5s;
		transition: height .5s;
		&.mp-list-show {
			height: 400px;
		}
	}
	.mp-list-title {
		height: 40px;
		font-size: 18px;
		color: #FFF;
		line-height: 40px;
		width: 100%;
		background: @mp-background-color;
		li {
			float: left;
			padding: 0 20px;
			cursor: pointer;
		}
	}
	.mp-list-title-current {
		background: @mp-gray;
		position: relative;
		&:before {
			content: "";
			position: absolute;
			top: 40px;
			left: 50%;
			width: 0;
			height: 0;
			border: 6px dashed transparent;
			border-top:6px solid @mp-gray;
			margin-left: -6px;
		}
	}
	.mp-list-table {
		max-height: 340px;
		width: 100%;
		border-collapse: collapse;
		border: none;
		margin: 10px 0;
		overflow: auto;
		th {
			font-weight: normal;
			text-align: left;
		}
		th,td {
			text-indent: 10px;
		}
		tr {
			height: 20px;
			font-size: 14px;
			color: #FFF;
			line-height: 2;
			padding: 0 10px;
		}
		tbody {
			tr{
				cursor: pointer;
				&.mp-list-current,&:hover {
					background: @mp-gray;
				}
			}
		}
	}
}